<template>
  <div class="view">
    <div class="plane main">
      <div v-for="item in 6" :key="item" class="circle"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cardView'
}
</script>

<style scoped lang="scss">
$side: 200px;
$l: 90px;
$num: 10;
$dur: 10s;
$color: rgba(90, 163, 241, 1);
@mixin plane($w, $h) {
  width: $w;
  height: $h;
  transform-style: preserve-3d;
}
@mixin view($p) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  perspective: $p;
}
@mixin center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.view {
  @include view(400);
  z-index: -1;
  overflow: hidden;
}
.plane {
  @include plane($side, $side);
  &.main {
    @include center;
    transform: rotateX(60deg) rotateZ(-30deg);
    animation: rotate 20s infinite linear;
  }
  .circle {
    width: $side;
    height: $side;
    position: absolute;
    transform-style: preserve-3d;
    border-radius: 100%;
    box-sizing: border-box;
    box-shadow: 0 0 60px $color, inset 0 0 60px $color;
    &::before,
    &::after {
      content: "";
      display: block;
      @include center;
      width: 10%;
      height: 10%;
      border-radius: 100%;
      background: $color;
      box-sizing: border-box;
      box-shadow: 0 0 60px 2px $color;
    }
    &::before {
      transform: translateZ(-$l);
    }
    &::after {
      transform: translateZ($l);
    }
    @for $i from 1 through 5 {
      &:nth-child(#{$i}) {
        transform: rotateZ($i / 5 * 360deg) rotateX(63.435deg);
      }
    }
  }
  @keyframes rotate {
    0% {
      transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
  }
}
</style>